<template>
  <view class="main">
    <view class="tab-box dispaly-just-between">
      <view class="tab-item" v-for="(item, index) in tabBarList" :key="item.type" @click="clickTab(item, index)">
        <view class="tab-bg">
          <view class="bg">
            <image :src="item.isActive ?'/static/tabBar/index-bg.png' :'/static/tabBar/mine-bg.png'"/>
            <view class="icon w-100 dispaly-align-center">
              <view class="dispaly-col-center">
                <image :src="item.icon" :class="{'active': item.isActive}"/>
                <view class="name">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'

const tabBarList = ref([
  {
    name: '首页',
    isActive: true,
    path: '/pages/index/index',
    icon: '/static/tabBar/mine.png',
    type: 1,
    bg: '/static/tabBar/index-bg.png'
  },
  {
    name: '我的',
    isActive: false,
    path: '/pages/mine/mine',
    icon: '/static/tabBar/index.png',
    type: 2,
    bg: '/static/tabBar/mine-bg.png'
  }
])

const props = defineProps({
  currentPath: { // 当前页面路径
    type: String,
    default: '/pages/index/index',
  },
})

const current = ref(0)
const clickTab = (item, index) => {
  current.value = index
  tabBarList.value.forEach((item, idx) => {
    item.isActive = idx === index;
  });
  console.log(item.isActive)
  uni.switchTab({
    url: item.path
  })

}
</script>

<style lang="scss" scoped>
.active {
  transform: scale(1.3);
  transition: all 0.4s;
}

.main {
  height: 190rpx;
  background: #ffbf0f;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .tab-box {
    padding: 0 30rpx;

    .tab-item {
      .tab-bg {
        .bg {
          position: relative;

          image {
            width: 342rpx;
            height: 195rpx;
          }

          .icon {
            position: absolute;
            top: -30rpx;

            image {
              width: 92rpx;
              height: 92rpx;
            }

            .name {
              font-family: IPix;
              font-size: 32rpx;
              color: #000000;
              margin-top: 17rpx;
            }
          }
        }
      }
    }
  }
}
</style>